<template>
  <view class="u-center">
    <view class="header-img">
      <!-- 宝宝信息 -->
      <view class="baby-info">
        <!-- 头像+名称+年龄 -->
        <view class="baby">
          <u-image
            width="153rpx"
            height="153rpx"
            :src="vuex_babyInfo.avatar"
            shape="circle"
            :class="['image']"
            :lazy-load="true"
            @click="preImg"
          >
            <u-loading slot="loading"></u-loading>
          </u-image>

          <view class="baby-i">
            <view class="baby-name">{{ vuex_babyInfo.name }}</view>
            <!-- 性别 -->
            <view>
              <image
                style="width: 24rpx; height: 24rpx; margin-right: 2rpx"
                src="@/static/index/sex.png"
                shape="circle"
              ></image>
              <view>{{ sexList[vuex_babyInfo.sex] }}</view>
            </view>
            <!-- 年龄 -->
            <view>
              <view style="margin-right: 2rpx">
                <image
                  style="width: 24rpx; height: 24rpx; margin-right: 2rpx"
                  src="@/static/index/age.png"
                  shape="circle"
                ></image>
              </view>

              <view>{{ age }}</view>
            </view>
          </view>
        </view>
        <!-- 期末报告 -->
        <view class="report">
          <view>
            <u-button
              :custom-style="customStyle"
              shape="circle"
              @click="changeRole"
              >切换身份</u-button
            >
          </view>
        </view>
      </view>

      <!-- <u-button
        type="success"
        shape="circle"
        :plain="true"
        :style="{ margin: '20rpx' }"
        @click="layout = true"
        >退出登录</u-button
      > -->

      <u-button
        :custom-style="customStyle"
        :style="{ margin: '20rpx' }"
        shape="circle"
        @click="layout = true"
        >退出登录</u-button
      >

      <!-- 个人信息 -->
      <view class="user-info">
        <view>个人信息</view>

        <view class="info-list" v-for="(item, index) in infoList" :key="index">
          <view>{{ item.label }}</view>
          <view @click="changeInfo(item, index)">
            <view>{{ item.value }}</view>
            <image
              src="@/static/index/right.png"
              style="width: 10.6rpx; height: 20rpx; margin-left: 20rpx"
            />
          </view>
        </view>
      </view>

      <view class="kefu" @click="dialNumber">
        <view> 客服热线： </view>
        <view> {{ phone }} </view>
      </view>
    </view>

    <!-- 修改学校弹窗 -->
    <change-school ref="changeSchoolRef"></change-school>

    <!-- 退出登录弹窗 -->
    <u-modal
      v-model="layout"
      content="是否退出登录?"
      confirm-text="退出"
      :show-cancel-button="true"
      @confirm="loginout"
    ></u-modal>

    <u-select
      v-model="sexShow"
      :list="sexSelector"
      value-name="id"
      label-name="sexName"
      @confirm="sexChange"
    ></u-select>
  </view>
</template>

<script>
import ChangeSchool from "./components/changeSchool";
import { getGrowAge } from "@/common/utils";
export default {
  components: {
    ChangeSchool,
  },
  data() {
    return {
      src: "https://s1.ax1x.com/2020/11/05/BREIu6.jpg",
      age: "",
      layout: false, //退出登录弹窗
      sexList: ["无", "小王子", "小公主"],
      phone: "15882088710",
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
      sexShow: false, //xingbie更改
      customStyle: {
        color: "#0ACC94",
        borderRadius: "20rpx",
        height: "68rpx",
      },
      sexSelector: [
        {
          sexName: "小王子",
          id: 1,
        },
        {
          sexName: "小公主",
          id: 2,
        },
      ],
      infoList: [
        {
          label: "姓名",
          value: "王小王",
        },
        {
          label: "性别",
          value: "小公主",
        },
        {
          label: "出生日期",
          value: "2015-10-11",
        },
        {
          label: "电话号码",
          value: "15442587569",
        },
        {
          label: "学校",
          value: "环球幼儿园",
        },
        {
          label: "班级",
          value: "小樱桃班",
        },
      ],
    };
  },
  methods: {
    /**
     * 放大头像
     */
    preImg() {
      uni.previewImage({
        urls: [this.vuex_babyInfo.avatar],
      });
    },
    /**
     * 更改学校
     */
    changeInfo(item, index) {
      // 点击学校
      if (index === 4) {
        this.$u.api.schoolListApi().then((res) => {
          this.$refs.changeSchoolRef.schoolList = res.data;
          // 宝宝目前所在学校
          this.$refs.changeSchoolRef.chooseSchool = this.vuex_babyInfo.school_id;
          // 选择第一个学校
          this.$refs.changeSchoolRef.show = true;
        });
      }

      // 点击班级
      if (index === 5) {
        this.$u.api.schoolListApi().then((res) => {
          //点击class 唯一标识
          this.$refs.changeSchoolRef.chooseClass1 = true;

          this.$refs.changeSchoolRef.schoolList = res.data;
          // 宝宝目前所在学校
          this.$refs.changeSchoolRef.chooseSchool = this.vuex_babyInfo.school_id;
          // // 选择第一个学校
          // this.$refs.changeSchoolRef.show = true;

          //获取class
          var form = {
            school_id: this.vuex_babyInfo.school_id,
          };
          this.$u.api.classListApi(form).then((res) => {
            this.$refs.changeSchoolRef.classList = res.data;
            //宝宝目前所在班级
            this.$refs.changeSchoolRef.chooseClassId = this.vuex_babyInfo.class_id;
            this.$refs.changeSchoolRef.show = true;
          });
        });
      }

      // 更改性别
      if (index == 1) {
        this.sexShow = true;
      }

      if (index === 0) {
        this.$u.toast("不支持修改姓名哦！");
      }
      if (index === 2) {
        this.$u.toast("不支持修改出生日期哦！");
      }

      if (index === 3) {
        uni.navigateTo({
          url: "/pages/bindPhone/newPhone",
        });
      }
    },
    /**
     * 信息chuli
     */
    babyInfoDetail() {
      this.age = getGrowAge(this.vuex_babyInfo.birthday); //根据生日来获取年龄
      console.log(this.age);
      this.infoList = [
        {
          label: "姓名",
          value: this.vuex_babyInfo.name,
        },
        {
          label: "性别",
          value: this.sexList[this.vuex_babyInfo.sex],
        },
        {
          label: "出生日期",
          value: this.vuex_babyInfo.birthday,
        },
        {
          label: "电话号码",
          value: this.vuex_userInfo.phone,
        },
        {
          label: "学校",
          value: this.vuex_babyInfo.school_name,
        },
        {
          label: "班级",
          value: this.vuex_babyInfo.class_name,
        },
      ];
    },

    /**
     * 退出登录
     */
    loginout() {
      this.$u.vuex("vuex_babyInfo", {});
      this.$u.vuex("vuex_userInfo", {});
      this.$u.vuex("vuex_healthItem", []);
      uni.redirectTo({
        url: "/pages/regist/register",
      });
    },

    /**
     * 更换 性别
     */
    sexChange(e) {
      console.log(e);
      var form = {
        baby_id: this.vuex_babyInfo.baby_id,
        sex: e[0].value,
      };
      this.$u.api.updateSexApi(form).then((res) => {
        uni.showToast({
          title: "修改成功",
          duration: 1000,
        });

        var babyInfo = this.vuex_babyInfo;
        babyInfo.sex = e[0].value;
        this.$u.vuex("vuex_babyInfo", babyInfo);
        //更新数据
        this.babyInfoDetail();
      });
    },
    /**
     * 拨打电话
     */
    dialNumber() {
      uni.makePhoneCall({
        phoneNumber: this.phone, //仅为示例
      });
    },

    /**
     * 切换身份
     */
    changeRole() {
      uni.navigateTo({
        url: "/pages/identifiy/identifiy",
      });
    },
  },
  created() {
    this.babyInfoDetail();
  },
};
</script>

<style scoped lang ='scss' >
.u-center {
  background-color: #f7f7f7;
  min-height: 93vh;
  .header-img {
    /* background-image: url("@/static/index/header.png"); */
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 50rpx 20rpx;
    height: auto;
    .baby-info {
      height: 220rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      padding: 18 * 2rpx 15.5 * 2rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      box-shadow: 5rpx 7rpx 8rpx 0rpx #dcdfe6;
      .baby {
        display: flex;
        flex-direction: row;
        align-items: center;
        .image {
          box-shadow: 3px 3px 10px 1px #e0c4cc;
          border-radius: 50%;
        }
        .baby-i {
          display: flex;
          flex-direction: column;
          margin-left: 30rpx;
          .baby-name {
            color: #000000;
            font-size: 36rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }
          & > view:nth-child(2),
          & > view:nth-child(3) {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #000000;
            font-size: 24rpx;
            margin-bottom: 5rpx;
          }
        }
      }
      .report {
        text-align: center;
        & > view:nth-child(1) {
          width: 180rpx;
        }
      }
    }

    .user-info {
      padding: 20rpx;
      background-color: #ffffff;
      margin-top: 20rpx;
      border-radius: 20rpx;
      box-shadow: 5rpx 7rpx 8rpx 0rpx #dcdfe6;
      & > view:nth-child(1) {
        color: #404040;
        font-size: 32rpx;
        font-weight: Bold;
        margin: 20rpx 0;
      }
      .info-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 27rpx 0;
        border-bottom: 1rpx solid #e6e6e6;
        & > view:nth-child(1) {
          color: #666666;
          font-size: 28rpx;
          font-weight: Regular;
        }
        & > view:nth-child(2) {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          color: #333333;
          font-weight: Regular;
          font-size: 28rpx;
        }
      }

      & > view:last-child {
        border-bottom: none;
      }
    }

    .kefu {
      margin-top: 60rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: Regular;

      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      & > view:nth-child(1) {
        color: #404040;
      }
      & > view:nth-child(2) {
        color: #07c38f;
      }
    }
  }
}
</style>
